<route lang="json5" type="page">
{
  style: {
    navigationBarTitleText: '登录',
    navigationStyle: 'custom',
  },
}
</route>
<template>
  <view class="login-container">
    <view class="login-header">
      <image class="login-logo" src="/static/images/login/logo.png"></image>
      <view class="login-desc"></view>
    </view>
    <view class="login-form">
      <view class="inputForm">
        <image class="login-logo" src="/static/images/login/InputForm.png"></image>
      </view>
      <view class="login-input-group">
        <view class="input-wrapper">
          <view class="input-label">手机号码</view>
          <wd-input
            type="tel"
            v-model="loginForm.mobilePhone"
            placeholder="输入手机号"
            class="custom-input"
            placeholder-style="color: rgba(255, 255, 255, 0.5)"
          />
        </view>
        <view class="input-wrapper">
          <view class="input-label">短信验证码</view>
          <wd-input
            type="number"
            v-model="loginForm.checkNumber"
            placeholder="输入验证码"
            class="custom-input"
            placeholder-style="color: rgba(255, 255, 255, 0.5)"
            style="flex: 1; margin-right: 16rpx"
          />
          <wd-button
            type="primary"
            size="small"
            :disabled="countDown > 0"
            @click="handleGetVerifyCode"
            class="get-code-btn"
            style="background-color: #2e83ff; border-color: #2e83ff"
          >
            {{ countDown > 0 ? `${countDown}秒后重试` : '获取' }}
          </wd-button>
        </view>
      </view>
      <!-- 登录按钮组 -->
    </view>
    <view class="login-buttons">
      <!-- 账号密码登录按钮 -->
      <!-- <wd-button
        type="primary"
        size="large"
        block
        @click="handleAccountOperator(1)"
        class="account-login-btn"
      >
        <wd-icon name="right" size="18px" class="login-icon"></wd-icon>
        登录
      </wd-button> -->
      <view class="loginButton">
        <image
          src="/static/images/login/LoginButton.png"
          mode="scaleToFill"
          @click="handleAccountOperator(1)"
        />
        <view class="wxLogin">微信登录</view>
      </view>
    </view>
    <view class="login-footer"></view>
  </view>
</template>

<script setup lang="ts">
import { useUserStore } from '@/store/user'
import { ILoginForm, getCheckNumber } from '@/api/login'
import { useToast } from 'wot-design-uni'
import { isTableBar } from '@/utils/index'
const redirectRoute = ref('')
const code = ref('')
const toast = useToast()

// 初始化store
const userStore = useUserStore()
// 登录表单数据
const loginForm = ref<ILoginForm>({
  mobilePhone: null,
  checkNumber: null,
})
// 隐私协议勾选状态
// 验证码倒计时
const countDown = ref(0)
const timer = ref<number | null>(null)

// 获取验证码
const handleGetVerifyCode = async () => {
  const mobilePhone = loginForm.value.mobilePhone
  if (!mobilePhone) {
    toast.warning('请输入手机号码')
    return
  }

  // 简单的手机号格式验证
  if (!/^1[3-9]\d{9}$/.test(String(mobilePhone))) {
    toast.warning('请输入正确的手机号码')
    return
  }
  const res = await getCheckNumber({
    phone: mobilePhone,
  })
  if (res.code) {
    toast.success('验证码发送成功')
    code.value = String(res.code)
    loginForm.value.checkNumber = Number(code.value)
  } else {
    toast.error(res.msg || '验证码发送失败')
  }
  // 这里可以添加发送验证码的API调用
  console.log('发送验证码到:', mobilePhone)

  // 开始倒计时
  countDown.value = 60

  if (timer.value) {
    clearInterval(timer.value)
  }

  timer.value = setInterval(() => {
    countDown.value--
    if (countDown.value <= 0) {
      if (timer.value) {
        clearInterval(timer.value)
        timer.value = null
      }
    }
  }, 1000)
}

// 组件卸载时清除定时器
onUnmounted(() => {
  if (timer.value) {
    clearInterval(timer.value)
  }
})

// 页面加载完毕时触发
onLoad((option) => {
  console.log(option, 213)
  // 获取跳转路由
  if (option.redirect) {
    redirectRoute.value = option.redirect
  }
})

// 添加防抖状态变量
const isSubmitting = ref(false)

// 注册/登录
const handleAccountOperator = async (type: number) => {
  // 防抖检查 - 如果正在提交则直接返回
  // if (isSubmitting.value) {
  //   return
  // }

  // if (!agreePrivacy.value) {
  //   toast.error('请阅读同意协议')
  //   return
  // }
  if (!loginForm.value.mobilePhone) {
    toast.error('请输入手机号码')
    return
  }
  if (!loginForm.value.checkNumber) {
    toast.error('请输入验证码')
    return
  }

  let targetUrl = ''
  try {
    // 设置为正在提交状态
    isSubmitting.value = true
    const res = await userStore.login(loginForm.value)
    if (res.code === 200) {
      uni.setStorageSync('token', res.token)
      await userStore.getUserInfo()
      toast.success('登录成功')
      targetUrl = '/pages/home/index'
    } else {
      toast.error(res.msg)
      return
    }
  } catch (error) {
    console.error('操作失败:', error)
    toast.error('操作失败，请稍后重试')
  } finally {
    // 无论成功失败，都重置提交状态
    isSubmitting.value = false
  }
  setTimeout(() => {
    if (isTableBar(targetUrl)) {
      uni.switchTab({ url: targetUrl })
    } else {
      uni.redirectTo({ url: targetUrl })
    }
  }, 1000)
}
</script>

<style lang="scss" scoped>
.login-container {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  padding: 0 70rpx;
  background-image: url('/static/images/login/loginBackground.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  position: relative;
  .login-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin-top: 60rpx;
    animation: fadeInDown 0.8s ease-out;
    image {
      height: 280rpx;
      width: 320rpx;
    }
  }
  .login-form {
    position: relative;
    margin-top: 60rpx;
    .inputForm {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      image {
        width: 100%;
        height: 100%;
      }
    }

    .login-input-group {
      position: relative;
      z-index: 10;
      padding: 100rpx 40rpx 100rpx;
    }

    .input-wrapper {
      display: flex;
      align-items: center;
      margin-bottom: 40rpx;
      gap: 24rpx;
      width: 100%;
    }

    .input-label {
      font-size: 24rpx;
      color: #000000;
      width: 120rpx;
      text-align: center;
      font-weight: bolder;
    }

    .custom-input {
      flex: 1;
      background: #606ba3;
      border: 2px solid #00ffff;
      border-radius: 12rpx;
      font-size: 20rpx;
      padding: 0 12rpx;
      height: 60rpx;
      display: flex;
      align-items: center;
      box-sizing: border-box;
      transition: all 0.3s;
    }

    ::v-deep .uni-input-input {
      color: #fff !important;
    }

    .custom-input:focus {
      border-color: #4a9eff;
      box-shadow: 0 0 10rpx rgba(46, 131, 255, 0.5);
    }

    .get-code-btn {
      min-width: 150rpx;
      height: 50rpx;
      font-size: 28rpx;
      border-radius: 12rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: all 0.3s;
      background-color: #091743 !important;
      color: #00ffff;
      border: 2px solid #00ffff !important;
    }

    .get-code-btn:disabled {
      background-color: rgba(46, 131, 255, 0.5) !important;
      border-color: rgba(46, 131, 255, 0.5) !important;
      color: rgba(255, 255, 255, 0.7) !important;
    }
  }
  .login-buttons {
    margin-top: 40rpx;
    .loginButton {
      width: 100%;
      text-align: center;
      image {
        height: 100rpx;
        width: 400rpx;
      }
    }
    .wxLogin {
      margin-top: 20rpx;
      font-size: 20rpx;
      color: #00ffff;
    }
  }
}
</style>
